<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
  <meta name="description" content="A larger org chart with an Overview and searching capability."/>
<!--  <link rel="stylesheet" href="../assets/css/style.css"/>-->
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <title>Org Chart Static</title>
</head>

<body>
<!-- This top nav is not part of the sample code -->
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
  <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
  <!-- * * * * * * * * * * * * * -->
  <!-- Start of GoJS sample code -->

  <script src="../../../node_modules/gojs/release/go.js"></script>
  <div class="p-4 w-full">

    <style type="text/css">
      #myOverviewDiv {
        position: absolute;
        width: 200px;
        height: 100px;
        top: 10px;
        left: 10px;
        background-color: #f2f2f2;
        z-index: 300; /* make sure its in front */
        border: solid 1px #7986cb;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css">
    <script id="code">
      function init() {
        var $ = go.GraphObject.make;  // for conciseness in defining templates

        // some constants that will be reused within templates
        var mt8 = new go.Margin(8, 0, 0, 0);
        var mr8 = new go.Margin(0, 8, 0, 0);
        var ml8 = new go.Margin(0, 0, 0, 8);
        var roundedRectangleParams = {
          parameter1: 2,  // set the rounded corner
          spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight  // make content go all the way to inside edges of rounded corners
        };

        myDiagram =
          $(go.Diagram, "myDiagramDiv",  // the DIV HTML element
            {
              // Put the diagram contents at the top center of the viewport
              initialDocumentSpot: go.Spot.Top,
              initialViewportSpot: go.Spot.Top,
              // OR: Scroll to show a particular node, once the layout has determined where that node is
              // "InitialLayoutCompleted": function(e) {
              //  var node = e.diagram.findNodeForKey(28);
              //  if (node !== null) e.diagram.commandHandler.scrollToPart(node);
              // },
              layout:
                $(go.TreeLayout,  // use a TreeLayout to position all of the nodes
                  {
                    isOngoing: false,  // don't relayout when expanding/collapsing panels
                    treeStyle: go.TreeLayout.StyleLastParents,
                    // properties for most of the tree:
                    angle: 90,
                    layerSpacing: 80,
                    // properties for the "last parents":
                    alternateAngle: 0,
                    alternateAlignment: go.TreeLayout.AlignmentStart,
                    alternateNodeIndent: 15,
                    alternateNodeIndentPastParent: 1,
                    alternateNodeSpacing: 15,
                    alternateLayerSpacing: 40,
                    alternateLayerSpacingParentOverlap: 1,
                    alternatePortSpot: new go.Spot(0.001, 1, 20, 0),
                    alternateChildPortSpot: go.Spot.Left
                  })
            });

        // This function provides a common style for most of the TextBlocks.
        // Some of these values may be overridden in a particular TextBlock.
        function textStyle(field) {
          return [
            {
              font: "12px Roboto, sans-serif", stroke: "rgba(0, 0, 0, .60)",
              visible: false  // only show textblocks when there is corresponding data for them
            },
            new go.Binding("visible", field, function(val) { return val !== undefined; })
          ];
        }

        // define Converters to be used for Bindings
        function theNationFlagConverter(nation) {
          return "https://www.nwoods.com/images/emojiflags/" + nation + ".png";
        }

        // define the Node template
        myDiagram.nodeTemplate =
          $(go.Node, "Auto",
            {
              locationSpot: go.Spot.Top,
              isShadowed: true, shadowBlur: 1,
              shadowOffset: new go.Point(0, 1),
              shadowColor: "rgba(0, 0, 0, .14)",
              selectionAdornmentTemplate:  // selection adornment to match shape of nodes
                $(go.Adornment, "Auto",
                  $(go.Shape, "RoundedRectangle", roundedRectangleParams,
                    { fill: null, stroke: "#7986cb", strokeWidth: 3 }
                  ),
                  $(go.Placeholder)
                )  // end Adornment
            },
            $(go.Shape, "RoundedRectangle", roundedRectangleParams,
              { name: "SHAPE", fill: "#ffffff", strokeWidth: 0 },
              // gold if highlighted, white otherwise
              new go.Binding("fill", "isHighlighted", function(h) { return h ? "gold" : "#ffffff"; }).ofObject()
            ),
            $(go.Panel, "Vertical",
              $(go.Panel, "Horizontal",
                { margin: 8 },
                $(go.Picture,  // flag image, only visible if a nation is specified
                  { margin: mr8, visible: false, desiredSize: new go.Size(50, 50) },
                  new go.Binding("source", "nation", theNationFlagConverter),
                  new go.Binding("visible", "nation", function(nat) { return nat !== undefined; })
                ),
                $(go.Panel, "Table",
                  $(go.TextBlock,
                    {
                      row: 0, alignment: go.Spot.Left,
                      font: "16px Roboto, sans-serif",
                      stroke: "rgba(0, 0, 0, .87)",
                      maxSize: new go.Size(160, NaN)
                    },
                    new go.Binding("text", "name")
                  ),
                  $(go.TextBlock, textStyle("title"),
                    {
                      row: 1, alignment: go.Spot.Left,
                      maxSize: new go.Size(160, NaN)
                    },
                    new go.Binding("text", "title")
                  ),
                  $("PanelExpanderButton", "INFO",
                    { row: 0, column: 1, rowSpan: 2, margin: ml8 }
                  )
                )
              ),
              $(go.Shape, "LineH",
                {
                  stroke: "rgba(0, 0, 0, .60)", strokeWidth: 1,
                  height: 1, stretch: go.GraphObject.Horizontal
                },
                new go.Binding("visible").ofObject("INFO")  // only visible when info is expanded
              ),
              $(go.Panel, "Vertical",
                {
                  name: "INFO",  // identify to the PanelExpanderButton
                  stretch: go.GraphObject.Horizontal,  // take up whole available width
                  margin: 8,
                  defaultAlignment: go.Spot.Left,  // thus no need to specify alignment on each element
                },
                $(go.TextBlock, textStyle("headOf"),
                  new go.Binding("text", "headOf", function(head) { return "Head of: " + head; })
                ),
                $(go.TextBlock, textStyle("boss"),
                  new go.Binding("margin", "headOf", function(head) { return mt8; }), // some space above if there is also a headOf value
                  new go.Binding("text", "boss", function(boss) {
                    var boss = myDiagram.model.findNodeDataForKey(boss);
                    if (boss !== null) {
                      return "Reporting to: " + boss.name;
                    }
                    return "";
                  })
                )
              )
            )
          );

        // define the Link template, a simple orthogonal line
        myDiagram.linkTemplate =
          $(go.Link, go.Link.Orthogonal,
            { corner: 5, selectable: false },
            $(go.Shape, { strokeWidth: 3, stroke: "#424242" }));  // dark gray, rounded corner links


        // set up the nodeDataArray, describing each person/position
        var nodeDataArray = [
          { key: 0, name: "Ban Ki-moon 반기문", nation: "SouthKorea", title: "Secretary-General of the United Nations", headOf: "Secretariat" },
          { key: 1, boss: 0, name: "Patricia O'Brien", nation: "Ireland", title: "Under-Secretary-General for Legal Affairs and United Nations Legal Counsel", headOf: "Office of Legal Affairs" },
          { key: 3, boss: 1, name: "Peter Taksøe-Jensen", nation: "Denmark", title: "Assistant Secretary-General for Legal Affairs" },
          { key: 9, boss: 3, name: "Other Employees" },
          { key: 4, boss: 1, name: "Maria R. Vicien - Milburn", nation: "Argentina", title: "General Legal Division Director", headOf: "General Legal Division" },
          { key: 10, boss: 4, name: "Other Employees" },
          { key: 5, boss: 1, name: "Václav Mikulka", nation: "CzechRepublic", title: "Codification Division Director", headOf: "Codification Division" },
          { key: 11, boss: 5, name: "Other Employees" },
          { key: 6, boss: 1, name: "Sergei Tarassenko", nation: "Russia", title: "Division for Ocean Affairs and the Law of the Sea Director", headOf: "Division for Ocean Affairs and the Law of the Sea" },
          { key: 12, boss: 6, name: "Alexandre Tagore Medeiros de Albuquerque", nation: "Brazil", title: "Chairman of the Commission on the Limits of the Continental Shelf", headOf: "The Commission on the Limits of the Continental Shelf" },
          { key: 17, boss: 12, name: "Peter F. Croker", nation: "Ireland", title: "Chairman of the Committee on Confidentiality", headOf: "The Committee on Confidentiality" },
          { key: 31, boss: 17, name: "Michael Anselme Marc Rosette", nation: "Seychelles", title: "Vice Chairman of the Committee on Confidentiality" },
          { key: 32, boss: 17, name: "Kensaku Tamaki", nation: "Japan", title: "Vice Chairman of the Committee on Confidentiality" },
          { key: 33, boss: 17, name: "Osvaldo Pedro Astiz", nation: "Argentina", title: "Member of the Committee on Confidentiality" },
          { key: 34, boss: 17, name: "Yuri Borisovitch Kazmin", nation: "Russia", title: "Member of the Committee on Confidentiality" },
          { key: 18, boss: 12, name: "Philip Alexander Symonds", nation: "Australia", title: "Chairman of the Committee on provision of scientific and technical advice to coastal States", headOf: "Committee on provision of scientific and technical advice to coastal States" },
          { key: 35, boss: 18, name: "Emmanuel Kalngui", nation: "Cameroon", title: "Vice Chairman of the Committee on provision of scientific and technical advice to coastal States" },
          { key: 36, boss: 18, name: "Sivaramakrishnan Rajan", nation: "India", title: "Vice Chairman of the Committee on provision of scientific and technical advice to coastal States" },
          { key: 37, boss: 18, name: "Francis L. Charles", nation: "TrinidadAndTobago", title: "Member of the Committee on provision of scientific and technical advice to costal States" },
          { key: 38, boss: 18, name: "Mihai Silviu German", nation: "Romania", title: "Member of the Committee on provision of scientific and technical advice to costal States" },
          { key: 19, boss: 12, name: "Lawrence Folajimi Awosika", nation: "Nigeria", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
          { key: 20, boss: 12, name: "Harald Brekke", nation: "Norway", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
          { key: 21, boss: 12, name: "Yong-Ahn Park", nation: "SouthKorea", title: "Vice Chairman of the Commission on the Limits of the Continental Shelf" },
          { key: 22, boss: 12, name: "Abu Bakar Jaafar", nation: "Malaysia", title: "Chairman of the Editorial Committee", headOf: "Editorial Committee" },
          { key: 23, boss: 12, name: "Galo Carrera Hurtado", nation: "Mexico", title: "Chairman of the Training Committee", headOf: "Training Committee" },
          { key: 24, boss: 12, name: "Indurlall Fagoonee", nation: "Mauritius", title: "Member of the Commission on the Limits of the Continental Shelf" },
          { key: 25, boss: 12, name: "George Jaoshvili", nation: "Georgia", title: "Member of the Commission on the Limits of the Continental Shelf" },
          { key: 26, boss: 12, name: "Wenzhang Lu", nation: "China", title: "Member of the Commission on the Limits of the Continental Shelf" },
          { key: 27, boss: 12, name: "Isaac Owusu Orudo", nation: "Ghana", title: "Member of the Commission on the Limits of the Continental Shelf" },
          { key: 28, boss: 12, name: "Fernando Manuel Maia Pimentel", nation: "Portugal", title: "Member of the Commission on the Limits of the Continental Shelf" },
          { key: 7, boss: 1, name: "Renaud Sorieul", nation: "France", title: "International Trade Law Division Director", headOf: "International Trade Law Division" },
          { key: 13, boss: 7, name: "Other Employees" },
          { key: 8, boss: 1, name: "Annebeth Rosenboom", nation: "Netherlands", title: "Treaty Section Chief", headOf: "Treaty Section" },
          { key: 14, boss: 8, name: "Bradford Smith", nation: "UnitedStates", title: "Substantive Legal Issues Head", headOf: "Substantive Legal Issues" },
          { key: 29, boss: 14, name: "Other Employees" },
          { key: 15, boss: 8, name: "Andrei Kolomoets", nation: "Russia", title: "Technical/Legal Issues Head", headOf: "Technical/Legal Issues" },
          { key: 30, boss: 15, name: "Other Employees" },
          { key: 16, boss: 8, name: "Other Employees" },
          { key: 2, boss: 0, name: "Heads of Other Offices/Departments" }
        ];

        // create the Model with data for the tree, and assign to the Diagram
        myDiagram.model =
          $(go.TreeModel,
            {
              nodeParentKeyProperty: "boss",  // this property refers to the parent node data
              nodeDataArray: nodeDataArray
            });

        // Overview
        myOverview =
          $(go.Overview, "myOverviewDiv",  // the HTML DIV element for the Overview
            { observed: myDiagram, contentAlignment: go.Spot.Center });   // tell it which Diagram to show and pan
      }

      // the Search functionality highlights all of the nodes that have at least one data property match a RegExp
      function searchDiagram() {  // called by button
        var input = document.getElementById("mySearch");
        if (!input) return;
        myDiagram.focus();

        myDiagram.startTransaction("highlight search");

        if (input.value) {
          // search four different data properties for the string, any of which may match for success
          // create a case insensitive RegExp from what the user typed
          var regex = new RegExp(input.value, "i");
          var results = myDiagram.findNodesByExample({ name: regex },
            { nation: regex },
            { title: regex },
            { headOf: regex });
          myDiagram.highlightCollection(results);
          // try to center the diagram at the first node that was found
          if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
        } else {  // empty string only clears highlighteds collection
          myDiagram.clearHighlighteds();
        }

        myDiagram.commitTransaction("highlight search");
      }
      window.addEventListener('DOMContentLoaded', init);
    </script>

    <div id="sample" style="position: relative;">
      <div id="myDiagramDiv" style="background-color: #f2f2f2; border: solid 1px black; width: 100%; height: 700px"></div>
      <div id="myOverviewDiv"></div> <!-- Styled in a <style> tag at the top of the html page -->
      <p>
        This sample shows an organizational chart diagram and uses an in-laid GoJS <a>Overview</a> to aid the user in navigation.
        The diagram uses a <a>TreeLayout</a> featuring <a>TreeLayout,StyleLastParents</a> to allow for different alignments on the last parents.
        The data was taken from the UN web site in August 2009.
      </p>
      <p>
        A search box demonstrates one way of finding and highlighting nodes whose data includes particular strings.
        Note that one can see all of the highlighted nodes in the Overview.
      </p>
      <input type="search" id="mySearch" onkeypress="if (event.keyCode === 13) searchDiagram()" />
      <button onclick="searchDiagram()">Search</button>
      <p>
        To learn how to build an org chart from scratch with GoJS, see the <a href="../learn/index.html">Getting Started tutorial</a>.
      </p>
      <p>
        If you want to have some "assistant" nodes on the side, above the regular reports,
        see the <a href="orgChartAssistants.html">Org Chart Assistants</a> sample, which is a copy of this sample
        that uses a custom <a>TreeLayout</a> to position "assistants" that way.
      </p>
      <p>
        Flag images are from <a href="https://openmoji.org/">OpenMoji</a> – the open-source emoji and icon project. License: CC BY-SA 4.0.
      </p>
    </div>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
</body>
<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
<!--<script src="../../../node_modules/gojs/assets/js/goSamples.js"></script>-->
</html>
